<!-- 令牌出售 -->
<template>
  <div class="pag" >
      <cube-popup type="my-popup" v-show="showNotice" ref="upgradeMember" class="my-popup" maskClosable>
          <div class="active-ct">
              <div class="upgrade-member">
                  <h2>提示</h2>
                  <h3 v-show="choice == 0">是否要撤销该令牌出售订单？</h3>
                  <h3 v-show="choice == 1">是否要删除该令牌已售完订单？</h3>
                  <!--<h3 v-show="current == 0">是否将已复制升级码<br/>移动至已售出？</h3>
                  <h3 v-show="current == 1">是否将已复制升级码<br/>移动至未售出？</h3>-->
                  <div class="submit-btn">
                      <span v-if="choice == 0" @click="confirmWithdraw">是</span>
                      <span v-if="choice == 1" @click="confirmDelete">是</span>
                      <span @click="cancel">否</span>
                  </div>
              </div>
          </div>
      </cube-popup>
      <cube-scroll ref="scroll" :data="offerList" :options="options" @pulling-up="onPullingUp" @scroll="pageScroll" :scrollEvents="['scroll']">
          <div class="top-info">
              <div class="token-title">
                  <img src="~assets/images/token/buylogo.png" alt="" />
                  <div class="token-title-desc">
                      <h4>{{host}}</h4>
                      <p>旗下矿工</p>
                  </div>
              </div>
              <div class="token-data">
                  <div class="token-total">共计：{{tokenTotal}}<span>块令牌</span><div @click="refreshPage"><img :class="{'refresh-img-rotate': rotateImg}" src="~assets/images/token/fresh.png" alt=""></div></div>
                  <div class="token-self-status">
                      <div class="total-item">
                          <p>挖矿中</p>
                          <i>{{token.miningNum}}</i>
                      </div>
                      <p class="t-split"></p>
                      <div class="total-item">
                          <p>闲置中</p>
                          <i>{{token.idleNum}}</i>
                      </div>
                      <p class="t-split"></p>
                      <div class="total-item">
                          <p>出租中</p>
                          <i>{{token.rentNum}}</i>
                      </div>
                      <p class="t-split"></p>
                      <div class="total-item">
                          <p>出售中</p>
                          <i>{{token.saleNum}}</i>
                      </div>
                  </div>
              </div>
            <div class="queue" @click="goToBuybackQueue"><!-- @click="goToBuybackQueue"-->
              <!--<h4>官方回购队列</h4><p>您当前排在第542位<img src="~assets/images/token/rightArrow.png" alt="" /></p>-->
                <h4>官方回购队列</h4>
                <!--<p>今日官方已回购 0 块令牌<img src="~assets/images/token/rightArrow.png" alt="" /></p>-->
                <p v-if="userRankNum == 0 && rankNum == 0">今日官方已回购 {{haveDealNum}} 块令牌<img src="~assets/images/token/rightArrow.png" alt="" /></p>
                <p v-if="userRankNum == 0 && rankNum > 0">当前排队参与官方回购的令牌有 {{rankNum}} 块<img src="~assets/images/token/rightArrow.png" alt="" /></p>
                <p v-if="userRankNum > 0">您前方还有 {{userRankNum}} 块令牌参与官方回购的排队<img src="~assets/images/token/rightArrow.png" alt="" /></p>
            </div>
            <div class="official-purchase" @click="sellTokenOfficial">
                <p>官方回购(CVNT)</p>
            </div>
          </div>
          <div class="scroll-area">
              <div class="not-official-purchase" @click="sellTokenOut">
                  <p>我要出售令牌(USDT)</p>
              </div>
              <h3 class="third-party"><span>&nbsp;</span>我发布的订单</h3>
              <div class="code-content">
                  <div class="no-result-wrapper" v-show="offerList && offerList.length == 0">
                      <h2 class="no-result">
                          <img src="~assets/images/miningBoard/unstarted.png" alt="">
                          暂无明细
                      </h2>
                  </div>
                  <div class="scroll-list-wrap" v-show="offerList && offerList.length > 0">
                      <!--<cube-scroll>-->
                      <div class="code-item" v-for="(item, index) in offerList" :class="{'adjust-opacity': item.status == 4 || item.status == 5}">
                          <img v-if="item.status == 4" class="sold-out" src="~assets/images/token/soldout.png" alt="" />
                          <img v-if="item.status == 5" class="sold-out" src="~assets/images/token/cancelled.png" alt="" />
                          <div class="title" :class="{'adjust-margin-bottom': item.status == 4 || item.status == 5}">
                              <span> {{item.createTime}}</span>
                              <!--<i>{{item.status == 1 ? '已售完' : '&nbsp;'}}</i>-->
                              <!--<strong @click="openNoticeModal(1)" :class="{'delete': item.status == 1}" v-if="item.status == 1">删除信息</strong>-->
                              <strong @click="openNoticeModal(0, item.orderNo)" v-if="item.status == 1">撤销</strong>
                          </div>
                          <div class="detail">
                              <div>
                                  <h3>单价</h3>
                                  <p>{{item.unitPrice}}USDT</p>
                              </div>
                              <div>
                                  <h3>预计出售</h3>
                                  <p>{{item.num}}</p>
                              </div>
                              <div>
                                  <h3>已出售</h3>
                                  <p>{{item.sellOut}}</p>
                              </div>
                              <div>
                                  <h3>总价</h3>
                                  <p>{{item.totalPrice}}USDT</p>
                              </div>
                              <!--<div>
                                  <strong>购买</strong>
                              </div>-->
                          </div>
                      </div>
                      <!--</cube-scroll>-->
                  </div>
              </div>
          </div>
      </cube-scroll>
      <div class="backtop" v-show="showBackTop" @click.stop="backToTop">
          <img src="~assets/images/miningboard/back-top.png" alt="" >
      </div>
      <div class="mask" v-show="showMask" @click="closeMask($event)" @touchmove.prevent>
          <div ref="maskContent">
              <transition name="fade">
                  <div class="general-height shopping-detail" v-if="showShopping">
                      <h3 class="title">官方回购令牌</h3>
                      <div class="content official-content">
                          <p><span>自有闲置令牌数量</span><strong>{{shoppingDetail.unused}}块</strong></p>
                          <!--<p v-if="shoppingDetail.old > 0"><span><span>*</span>优先回购</span><strong>拥有<span> {{shoppingDetail.old}}块 </span>旧令牌(<span>{{shoppingDetail.oldPrice}}cvnt/块</span>)</strong></p>-->
                          <p style="display:block;text-align:center;" v-if="shoppingDetail.old > 0"><span><span>*</span>优先回购拥有的 <span>{{shoppingDetail.old}}块</span> 旧令牌(<span>{{shoppingDetail.oldPrice}}cvnt/块</span>)</span></p>
                          <p><span>出售数量</span><input @focus="inputFocus" type="number" min="1" v-model="shoppingDetail.number" /></p>
                          <p><span>令牌现单价为</span><strong>{{shoppingDetail.unitPrice}}CVNT/块</strong></p>
                          <div class="quene-notice" v-if="shoppingDetail.restNum > 0">
                              <h5>今日全网回购数量还剩余<span> {{shoppingDetail.restNum}} </span>块</h5>
                          </div>
                          <div class="quene-notice" :class="{'adjust-padding': shoppingDetail.restNum <= 0}" v-else>
                              <h5>您前方已参与官方令牌回购排队的数量为<span> {{shoppingDetail.rankNum}} </span>块</h5>
                              <h5>预计<span> {{shoppingDetail.estimateDay}} </span>天后处理您的出售令牌申请</h5>
                          </div>
                          <h4><span>*</span>您今日还可申请 {{shoppingDetail.max}} 块官方回购</h4><!-- 用户每日最多申请{{shoppingDetail.max}}块官方回购，-->
                          <h4>出售令牌所得CVNT需72小时到达可用余额</h4>
                      </div>
                      <div class="pay-btn" v-show="stepBtnOne">
                          <p @click.stop.prevent="confirmToDetail">确定</p>
                      </div>
                  </div>
              </transition>
              <transition name="fade">
                  <div class="general-height shopping-detail" v-if="showConfirm">
                      <h3 class="title"><img src="~assets/images/token/back.png" alt="" @click="backToFirst" />官方回购令牌详情</h3>
                      <div class="content confirm-content">
                          <h1>出售行为请在<span> {{countdown}}s </span>内操作完毕</h1>
                          <h3>官方回购令牌您将获得</h3>
                          <h2><span>+{{confirmDetail.total}}</span> CVNT</h2>
                          <p><span>回购单价</span><strong>新：{{confirmDetail.unitPrice}}CVNT/块，旧：{{confirmDetail.oldPrice}}CVNT/块</strong></p>
                          <!--<p><span>回购总价</span><strong>新：{{confirmDetail.unitPrice}}CVNT，旧：{{confirmDetail.oldPrice * confirmDetail.old}}CVNT</strong></p>-->
                          <p class="number buy-back"><span>回购数量</span><strong>{{confirmDetail.number}}块(新：{{confirmDetail.new}}块，旧：{{confirmDetail.old}}块)</strong></p>
                          <!--<div class="quene-notice"  v-if="showQuene">
                              <h5>今日全网回购数量还剩余<span> 45 </span>块</h5>
                          </div>-->
                          <div class="quene-notice adjust-padding" v-if="confirmDetail.rankNum > 0">
                              <h5>您前方已参与官方令牌回购排队的数量为<span> {{confirmDetail.rankNum}} </span>块</h5>
                              <h5>预计<span> {{confirmDetail.estimateDay}} </span>天后处理您的出售令牌申请</h5>
                          </div>
                          <h4><span>*</span>出售令牌所得CVNT需72小时到达可用余额</h4>
                      </div>
                      <div class="pay-btn">
                          <p @click.stop.prevent="confirmToPay">确定</p>
                      </div>
                  </div>
              </transition>
              <div class="general-height pay-password" v-if="showPay">
                  <h3 class="title">请在 <span style="color:#EB3257;"> {{countdown}}s </span> 内输入支付密码完成支付</h3>
                  <div class="password-wrapper">
                      <span><strong v-if="password.num1 >= 0"></strong></span>
                      <span><strong v-if="password.num2 >= 0"></strong></span>
                      <span><strong v-if="password.num3 >= 0"></strong></span>
                      <span><strong v-if="password.num4 >= 0"></strong></span>
                      <span><strong v-if="password.num5 >= 0"></strong></span>
                      <span><strong v-if="password.num6 >= 0"></strong></span>
                  </div>
                  <!--<div class="forget-password" @click="getPwd">忘记密码?</div>-->
                  <div class="number-group">
                      <div class="number-btn">
                          <div @click.stop.prevent="chooseNum(1)">1</div><div @click.stop.prevent="chooseNum(2)">2</div><div @click.stop.prevent="chooseNum(3)">3</div>
                      </div>
                      <div class="number-btn">
                          <div @click.stop.prevent="chooseNum(4)">4</div><div @click.stop.prevent="chooseNum(5)">5</div><div @click.stop.prevent="chooseNum(6)">6</div>
                      </div>
                      <div class="number-btn">
                          <div @click.stop.prevent="chooseNum(7)">7</div><div @click.stop.prevent="chooseNum(8)">8</div><div @click.stop.prevent="chooseNum(9)">9</div>
                      </div>
                      <div class="number-btn">
                          <div class="no-num"></div><div @click.stop.prevent="chooseNum(0)">0</div><div class="no-num" @click.stop.prevent="deletePwd"><img src="~assets/images/del.png" /></div>
                      </div>
                  </div>
                  <div class="pay-loading" v-show="showPayLoading">
                      <div class="paying">
                          <img src="~assets/images/paying.gif" />
                          <span>正在支付</span>
                      </div>
                  </div>
              </div>
              <div class="general-height id-check" :class="{'adjust-bottom': showAdjust}" v-if="showIdCheck">
                  <h3 class="title check-title">出售行为请在 <span style="color:#EB3257;"> {{countdown}}s </span> 内操作完毕</h3><!--  <img @click.stop.prevent="close" src="~assets/images/close.png" />身份验证 -->
                  <div class="check-content">
                      <p>需要通过绑定的手机 {{starPhone}}</p>
                      <p>进行身份验证以确保账户的资金安全</p>
                      <div class="sms-input">
                          <input placeholder="请输入接收到的验证码" type="number" v-model="verificationCode" /><span @click.stop.prevent="getVerifyCode" style="background:rgba(23,62,143,1);" v-if="showFlag">发送验证码</span><span v-else>重新发送 {{countdown1}}s</span>
                      </div>
                      <h4 @click.stop.prevent="finishVerification" class="finish-btn" :class="{'success': verificationCode.length == 4}">完成验证</h4>
                  </div>
              </div>
              <div class="general-height shopping-detail" v-if="showResult">
                  <h3 class="title">官方回购结果</h3>
                  <div class="result">
                      <img src="~assets/images/dealer/success.png" />
                      <h3 v-if="confirmDetail.rankNum == 0">官方回购令牌成功</h3>
                      <h3 v-if="confirmDetail.rankNum > 0">您的出售订单已加入官方回购队列</h3>
                  </div>
                  <div class="content confirm-content">
                      <p v-if="confirmDetail.rankNum > 0"><span>队列排名</span><strong>{{confirmDetail.rankNum}}名</strong></p>
                      <p :class="{'number': confirmDetail.rankNum > 0}"><span>回购数量</span><strong>{{confirmDetail.number}}块</strong></p>
                      <p class="number"><span>回购单价</span><strong>{{confirmDetail.unitPrice}}CVNT/块</strong></p>
                      <p class="number"><span>本单获得</span><strong>+{{confirmDetail.total}}CVNT</strong></p>
                      <p><span>订单号</span><strong>{{confirmDetail.orderNo}}</strong></p>
                  </div>
                  <div class="pay-btn">
                      <p @click.stop.prevent="goBackToShopping">完成</p>
                  </div>
              </div>
          </div>
      </div>
  </div>

</template>

<script>
  import md5 from 'js-md5';
  import 'common/js/gt';
  import {checkAgentPayPassword, userTokenInfo, mySaleTradeList, saleOrderCancel, buyBackStepFirst, buyBackStepSecond, buyBackStepThird,
    tokenGeetestInit, tokenGetCode, buyBackRankInfo} from 'api/register'

  export default {
    components: {

    },
    data() {
      return {
        stepBtnOne: true,
        showBackTop: false,
        isIOS: false,
        showAdjust: false,
        haveDealNum: 0,
        rankNum: 0,
        userRankNum: 0,
        rotateImg: false,
        showQuene: true,
        area: 86,
        phone: '',
        starPhone: '',
        host: '--',
        tokenTotal: 0,
        token: {
          idleNum: 0,
          miningNum: 0,
          rentNum: 0,
          saleNum: 0
        },
        offerList: null,
        /*offerList: [],*/
        options: {
          click: true,
          tap: true,
          pullUpLoad: true
        },
        shoppingDetail: {
          unused: 22,
          number: 1,
          unitPrice: 2342,
          old: 0,
          oldPrice: 3000,
          max: 5,
          estimateDay: 1,
          rankNum: 1,
          restNum: 1
        },
        confirmDetail: {
          number: 1,
          unitPrice: 2342,
          oldPrice: 3000,
          total: '',
          orderNo: '',
          new: 0,
          old: 1,
          estimateDay: 0,
          rankNum: 0
        },
        countdown: 120,
        countdown1: 60,
        showResult: false,
        payPassword: '',
        payPwd: '',
        password: {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        },
        showPayLoading: false,
        showIdCheck: false,
        verificationCode: '',
        showMask: false,
        showShopping: false,
        payStatus: 1,
        showPay: false,
        showConfirm: false,
        showFlag: true,
        showNotice: false,
        choice: 0,
        per: 20,
        page: 1,
        sw: true,
        orderNo: '',
        u: '',
        need_code: 1,
        captchaObj: '',
        scene: 'tokenSale'
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        let query = to.query;
        Object.assign(vm, query);
        vm.uid = query.uid;
        vm.token = query.token;
        vm.page = 1;
        vm.sw = true;
        vm.options.pullUpLoad = true;
        vm.setNormalStatus();
        vm.getUserTokenInfo();
        vm.getBuyBackRankInfo();
        vm.getPersonalSaleList();
      })
    },
    mounted() {
      let u = navigator.userAgent;
      // console.log(u);
      this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      // console.log(this.isIOS);
      const h = document.body.scrollHeight;

      const H = window.innerHeight;


      // console.log(h);
      if (this.isIOS) {
        document.body.addEventListener('focusin', () => {
          this.showAdjust = true;
        })
          document.body.addEventListener('focusout', () => {
            this.showAdjust = false;
        })
      } else {
        window.onresize = function() {
          if (document.body.scrollHeight < h) {
            this.showAdjust = true;
          } else {
            this.showAdjust = false;
          }
        }

        window.addEventListener('resize', () => {
          if (window.innerHeight < H) {
            this.stepBtnOne = false;
          } else {
            this.stepBtnOne = true;
          }
        })
      }

      this.getRegister_ini();
      /*const H = window.innerHeight;
      window.addEventListener('resize', () => {
        if (window.screen.availHeight < H) {
          this.showAdjust = true;
        } else {
          this.showAdjust = false;
        }
      })*/
    },
    watch: {
      'password.num6': {
        handler(newVal, oldVal) {
          if (newVal >= 0 && this.payPwd.length == 6) {
            // console.log(this.payPwd);
            this.payPassword = md5(this.payPwd);
            // console.log(this.payPassword);
            setTimeout(() => {
              this.verifyPayPassword();
            }, 50);
          }
        },
        immediate: true,
        deep: true
      }
    },
    beforeDestroy() {
      let setIntervalCountdown = window['setIntervalCountdown'];
      clearInterval(setIntervalCountdown);
      window['setIntervalCountdown'] = null;

      let codeIntervalCountdown = window['codeIntervalCountdown'];
      clearInterval(codeIntervalCountdown);
      window['codeIntervalCountdown'] = null;
    },
    methods: {
      refreshPage() {
        this.rotateImg = true;
        setTimeout(() => {
          this.rotateImg = false;
        }, 800);
        this.page = 1;
        this.sw = true;
        this.options.pullUpLoad = true;
        this.setNormalStatus();
        this.getUserTokenInfo();
        this.getBuyBackRankInfo();
        this.getPersonalSaleList();
      },
      setNormalStatus() {
        this.showNotice = false;
        this.shoppingDetail.number = 1;
        this.showFlag = true;
        this.countdown = 120;
        this.countdown1 = 60;
        this.payPassword = '';
        this.payPwd = '';
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.showResult = false;
        this.showIdCheck = false;
        this.verificationCode = '';
        this.showMask = false;
        this.showShopping = false;
        this.payStatus = 1;
        this.showPay = false;
        this.showPayLoading = false;
        this.showConfirm = false;
      },
      getUserTokenInfo() {
        userTokenInfo().then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.area = data.data.area;
            this.phone = data.data.phone;
            this.starPhone = this.phone.substr(0, 3) + '****' + this.phone.substr(7);
            this.host = data.data.superNodeName;
            this.token = data.data.num;
            this.tokenTotal = data.data.num.idleNum + data.data.num.miningNum + data.data.num.rentNum + data.data.num.saleNum;
          }
        }).catch((err) => {
            this.showToast(err.info, 'warn');
        })
      },
      getBuyBackRankInfo() {
        buyBackRankInfo().then((data) => {
          console.log(data);
          if (data.status && data.status == 1) {
            this.haveDealNum = data.data.haveDealNum;
            this.rankNum = data.data.rankNum;
            this.userRankNum = data.data.userRankNum;
          }
        }).catch((err) => {
            this.showToast(err.info, 'warn');
        })
      },
      getPersonalSaleList() {
        mySaleTradeList(this.per, this.page).then((data) => {
          // console.log(data);
          if (data.data && data.data.length > 0) {
            this.offerList = data.data;
          }
          if (!data.data || data.data == null || data.data.length == 0) {
            this.offerList = [];
          }
        }).catch((err) => {
          this.showToast(err.info, 'warn');
        })
      },
      inputFocus() {

        setTimeout(function(){
          window.scrollTo(0,document.body.clientHeight);
        }, 500);

      },
      backToTop() {
        this.$refs.scroll.scrollTo(0,0,2000);
      },
      pageScroll({y}) {
        if(y < -380){
          this.showBackTop = true
        }else{
          this.showBackTop = false
        }
      },
      onPullingUp() {
        this.page++;
        if (this.sw) {
          mySaleTradeList(this.per, this.page).then((data) => {
            if (data.data && data.data.length > 0) {
              this.offerList = this.offerList.concat(data.data);
              this.sw = true;
            }
            if (!data.data || data.data == null || data.data.length == 0) {
              this.sw = false;
              this.options.pullUpLoad = false;
              return;
            }
          }).catch((err) => {
              this.showToast(err.info, 'warn');
          })
        }
      },
      sellTokenOut() {
        this.showToast('功能已关闭！', 'warn');
        return;
        /*if (this.token.idleNum <= 0) {
          this.showToast('暂无可售闲置令牌！', 'warn');
          return;
        } else {
          this.$router.push({path: '/issueOrder', query: {
              phone: this.phone,
              area: this.area
              /!*uid: this.uid,
              token: this.token*!/
            }});
        }*/
      },
      goToBuybackQueue() {
        this.$router.push({path: '/buybackQueue', query: {

            /*uid: this.uid,
            token: this.token*/
          }});
      },
      startCountDown() {
        this.showFlag = false;
        let codeIntervalCountdown = window['codeIntervalCountdown'];
        if (codeIntervalCountdown) {
          clearInterval(codeIntervalCountdown);
          window['codeIntervalCountdown'] = null;
        }
        window['codeIntervalCountdown'] = setInterval(() => {

          this.countdown1--;
          if (this.countdown1 <= 0) {
            this.cancelCodeIntervalCountdown();
            this.countdown1 = 60;
            this.showFlag = true;
          }
        }, 1000);
      },
      startSetIntervalCountdown() {
        let setIntervalCountdown = window['setIntervalCountdown'];
        if (setIntervalCountdown) {
          clearInterval(setIntervalCountdown);
          window['setIntervalCountdown'] = null;
        }
        window['setIntervalCountdown'] = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            this.cancelSetIntervalCountdown();
            this.cancelCodeIntervalCountdown();
            this.showFlag = true;
            this.countdown1 = 60;
            this.countdown = 120;
            this.showMask = false;
            this.showConfirm = false;
            this.showPay = false;
            this.showIdCheck = false;
            this.verificationCode = '';
            /*关闭这个对话框时将当前已经输入的支付密码清空*/
            this.password = {
              num1: -1,
              num2: -1,
              num3: -1,
              num4: -1,
              num5: -1,
              num6: -1
            };
            this.payPwd = '';
            this.payPassword = '';
          }
        }, 1000);/*this.setIntervalCountdownTime*/
      },
      cancelSetIntervalCountdown() {
        let setIntervalCountdown = window['setIntervalCountdown'];
        clearInterval(setIntervalCountdown);
        window['setIntervalCountdown'] = null;
      },
      cancelCodeIntervalCountdown() {
        let codeIntervalCountdown = window['codeIntervalCountdown'];
        clearInterval(codeIntervalCountdown);
        window['codeIntervalCountdown'] = null;
      },
      openNoticeModal(val, orderNo) {
        this.choice = val;
        this.showNotice = true;
        this.orderNo = orderNo;
      },
      cancel() {
        this.showNotice = false;
      },
      confirmWithdraw() {
        if (this.isCancelling) {
          return;
        }
        this.isCancelling = true;
        saleOrderCancel({orderNo: this.orderNo}).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.isCancelling = false;
            this.page = 1;
            this.sw = true;
            this.options.pullUpLoad = true;
            this.getUserTokenInfo();
            this.getBuyBackRankInfo();
            this.getPersonalSaleList();
            this.showNotice = false;
            this.showToast('撤销成功', 'succcess');
          }
        }).catch((err) => {
          this.isCancelling = false;
          this.showToast(err.info, 'warn');
        })
      },
      confirmDelete() {
        this.showNotice = false;
      },
      getRegister_ini() {
        // this.isGetCoding = false;
        return tokenGeetestInit().then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.startGeetest(data);
          }
        })
      },
      startGeetest(data) {
        // console.log(data);
        initGeetest({
          // 以下配置参数来自服务端 SDK
          gt: data.data.gt,
          challenge: data.data.challenge,
          offline: !data.data.success,
          product: 'bind',
          new_captcha: true
        }, (captchaObj) => {
          // console.log('111' + captchaObj)
          this.captchaObj = captchaObj;
          // captchaObj.onReady(this.captchaReady).onSuccess(this.captchaSuccess);
          captchaObj.onSuccess(this.captchaSuccess);
        })
      },
      captchaReady() {
        this.captchaObj.verify();
      },
      captchaSuccess() {
        if (this.isGetCoding) {
          return;
        }
        this.isGetCoding = true;
        let result = this.captchaObj.getValidate();

        let postData = Object.assign({
          scene: this.scene,
          area: this.area,
          mobile: this.phone
        }, result);
        tokenGetCode(postData).then((data) => {
          // console.log(data);
          this.startCountDown();
          this.isGetCoding = false;
        // this.captchaObj = null;
        }).catch((err) => {
          this.isGetCoding = false;
          this.showToast(err.info, 'warn');
        })
      },

      sellTokenOfficial() {
        /*this.showToast('暂停官方回购令牌，预计1月9日恢复！', 'warn');*/
        buyBackStepFirst().then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.shoppingDetail.unused = data.data.haveNewNum + data.data.haveOldNum;
            this.shoppingDetail.unitPrice = data.data.newUnitPrice;
            this.shoppingDetail.old = data.data.haveOldNum;
            this.shoppingDetail.oldPrice = data.data.oldUnitPrice;
            this.shoppingDetail.max = data.data.userTodayRestNum;
            this.shoppingDetail.restNum = data.data.restNum;
            this.shoppingDetail.rankNum = data.data.rankNum;
            this.shoppingDetail.estimateDay = Math.ceil(data.data.rankNum / 200);
            // console.log(this.shoppingDetail.estimateDay);
            if (this.shoppingDetail.estimateDay == 0) {
              this.shoppingDetail.estimateDay = 1;
            }
            let hour = this.getCurrentHour();

            if (hour < 10) {
              this.shoppingDetail.estimateDay--;
            }

            /*if (this.shoppingDetail.estimateDay == 1) {
              this.shoppingDetail.estimateDay = 2;
            }*/
            // console.log(this.shoppingDetail.estimateDay);
            this.showMask = true;
            this.showShopping = true;
          }
        }).catch((err) => {
            this.showToast(err.info, 'warn');
        })





        // this.getRegister_ini();
      },
      getCurrentHour() {
        let myDate = new Date();
        let hour = myDate.getHours();
        console.log(hour);
        return hour;
      },
      confirmToDetail() {
        let reg = /^[0-9]+$/;
        // console.log(reg.test(this.shoppingDetail.number));
        if (this.shoppingDetail.number <= 0 || !reg.test(this.shoppingDetail.number) || this.shoppingDetail.number > this.shoppingDetail.unused || this.shoppingDetail.number > this.shoppingDetail.max) {
          this.showToast('剩余回购数量不足，或超过了当前自有闲置令牌数量!', 'warn');
          return;
        }
        this.commitOfficialSecondStep();

        /*this.payStatus = 2;  //  payStatus:1,表示当前处于选择不同会员经销商，payStatus:2，表示当前处于支付弹框状态
        this.showShopping = false;
        this.showConfirm = true;
        this.confirmDetail = {
          balance: this.shoppingDetail.balance,
          number: this.shoppingDetail.number,
          unitPrice: this.shoppingDetail.unitPrice,
          total: this.shoppingDetail.unitPrice * this.shoppingDetail.number
        };*/
      },
      commitOfficialSecondStep() {
        this.cancelSetIntervalCountdown();
        if (this.isSending) {
          return;
        }
        this.isSending = true;
        buyBackStepSecond({num: this.shoppingDetail.number}).then((data) => {
          // console.log(data);
          this.isSending = false;
          this.payStatus = 2;
          this.showShopping = false;
          this.showConfirm = true;
          this.confirmDetail = {
            orderNo: data.data.orderNo,
            number: data.data.num,
            unitPrice: data.data.unitPrice,
            oldPrice: data.data.oldUnitPrice,
            total: data.data.totalPrice,
            new: data.data.newNum,
            old: data.data.oldNum,
            rankNum: data.data.rankNum
          };
          this.confirmDetail.estimateDay = Math.ceil(this.confirmDetail.rankNum / 200);
          if (this.confirmDetail.estimateDay == 0) {
            this.confirmDetail.estimateDay = 1;
          }
          let hour = this.getCurrentHour();

          if (hour < 10) {
            this.confirmDetail.estimateDay--;
          }
        /*if (this.confirmDetail.estimateDay == 1) {
          this.confirmDetail.estimateDay = 2;
        }*/
          this.startSetIntervalCountdown();
        }).catch((err) => {
          this.isSending = false;
          this.showToast(err.info, 'warn');
        })
      },
      confirmToPay() {
        this.showConfirm = false;
        this.showPay = true;
      },
      getVerifyCode() {
        if (!this.captchaObj) {
          this.getRegister_ini().catch(e => {
            this.showToast(error.info, 'warn');
          })
          return;
        }
        /*if (this.isGetCoding) {
          return;
        }*/
        this.captchaObj.verify();
      },
      backToFirst() {
        this.showShopping = true;
        this.showConfirm = false;
      },

      verifyPayPassword() {
        this.showPayLoading = true;
        checkAgentPayPassword({uid: this.uid, password: this.payPassword,  scene: this.scene}).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.u = data.data.u;
            this.need_code = data.data.need_code;
            if (this.need_code == 1) {
              setTimeout(() => {
                this.showPayLoading = false;
                this.showPay = false;
                this.showIdCheck = true;
                /*this.showMask = false;
                */
              }, 500);
            } else if (this.need_code == 0) {
              setTimeout(() => {
                this.showPayLoading = false;
                this.showPay = false;
                this.finishVerification();
                /*this.showMask = false;
                */
              }, 500);

            }
          }
        }).catch((error) => {
            // console.log(error);
            if (error.status && error.status != 1) {
              setTimeout(() => {
                this.showToast(error.info, 'warn');
              }, 500)
            }
            setTimeout(() => {
              this.showPayLoading = false;
            }, 500)
        })
        /*验证支付密码成功或者失败后将当前已经输入的支付密码清空*/
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.payPwd = '';
        this.payPassword = '';
      },
      finishVerification() {
        if (this.need_code == 1) {
          if (this.verificationCode == '') {
            this.showToast('请输入短信验证码', 'warn');
            return;
          }
        }
        if (this.isSubmiting) {
          return;
        }
        let postData;
        if (this.need_code == 1) {
          postData = {
            orderNo: this.confirmDetail.orderNo,
            code: this.verificationCode,
            u: this.u
          };
        } else {
          postData = {
            orderNo: this.confirmDetail.orderNo,
            code: '',
            u: this.u
          };
        }
        this.isSubmiting = true;
        buyBackStepThird(postData).then((data) => {
          // console.log(data);
          this.isSubmiting = false;
          this.verificationCode = '';
          this.showIdCheck = false;
          this.showResult = true;
          this.showFlag = true;
          this.cancelCodeIntervalCountdown();
          this.countdown1 = 60;
          this.getUserTokenInfo();
          this.getBuyBackRankInfo();
          // this.getPersonalSaleList();
        }).catch((err) => {
          this.isSubmiting = false;
          if (this.need_code == 0) {
            this.showMask = false;
          }
          this.showToast(err.info, 'warn');
        })
        /*this.showIdCheck = false;
        this.showResult = true;*/
      },

      chooseNum(val) {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          this.password.num1 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 1) {
          this.password.num2 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 2) {
          this.password.num3 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 3) {
          this.password.num4 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 4) {
          this.password.num5 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 5) {
          this.password.num6 = val;
          this.payPwd += val;
        }
        // console.log(this.payPwd);
      },
      deletePwd() {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          return;
        } else if (this.payPwd.length == 1) {
          this.password.num1 = -1;
          this.payPwd = '';
        } else if (this.payPwd.length == 2) {
          this.password.num2 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 3) {
          this.password.num3 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 4) {
          this.password.num4 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 5) {
          this.password.num5 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 6) {
          this.password.num6 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        }
        // console.log(this.payPwd);
      },
      closeMask(ev) {
        if (!this.$refs.maskContent.contains(ev.target)) {
          this.showMask = false;
          this.showShopping = false;
          this.showConfirm = false;
          this.showPay = false;
          this.showIdCheck = false;
          this.showResult = false;
          /*if (this.payStatus == 2) {
            this.payStatus = 1;  //  payStatus:1,表示当前处于选择不同会员经销商，payStatus:2，表示当前处于支付弹框状态
            this.showPay = false;
          }*/

          /*关闭弹框时将当前已经输入的支付密码清空*/
          this.password = {
            num1: -1,
            num2: -1,
            num3: -1,
            num4: -1,
            num5: -1,
            num6: -1
          };
          this.payPwd = '';
          this.payPassword = '';
          this.countdown = 120;
          this.cancelSetIntervalCountdown();
          this.showFlag = true;
          this.cancelCodeIntervalCountdown();
          this.countdown1 = 60;

        }


      },
      goBackToShopping() {
        this.showMask = false;
        this.showShopping = false;
        this.showConfirm = false;
        this.showPay = false;
        this.showIdCheck = false;
        this.showResult = false;
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.payPwd = '';
        this.payPassword = '';
        this.countdown = 120;
        this.cancelSetIntervalCountdown();
        this.showFlag = true;
        this.countdown1 = 60;
        this.cancelCodeIntervalCountdown();
      },
      goAction(path){
          this.$router.push({path});
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      },
      toastTip (info) {
        this.$warn(info)
      }
    }
  }
</script>

<style lang="scss" scoped>


  .pag {
    background: #F5F5FB;
    height: 100%;
    font-size:30px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .token-title {
    display: flex;
    height:254px;
    background: url("~assets/images/token/buybanner.png") no-repeat center center;
    background-size: contain;
    img {
      width: 150px;
      height: 196px;
      margin:46px 36px 0 75px;
    }
    .token-title-desc{
      margin-top:46px;
      h4{
        margin-bottom:23px;
        font-size:36px;
        font-weight:500;
        color:rgba(255,255,255,1);
        text-shadow:0 2px 2px rgba(1,30,81,0.5);
      }
      p{
        font-size:30px;
        color:rgba(252,223,173,1);
      }
    }
  }
  .token-data {
    width:690px;
    height:220px;
    background:rgba(255,255,255,1);
    box-shadow:0 1px 2px 0 rgba(10,29,87,0.2);
    border-radius:14px;
    margin: -96px auto 0 auto;
  }

  .token-total {
    /*align-items: center;
    justify-content: center;
    display: flex;*/
    font-size:36px;
    font-weight:600;
    color:rgba(54,77,186,1);
    padding: 28px 0 32px 231px;
    //margin-bottom: 10px;
    span{
      font-size:22px;
      margin-left:4px;
      font-weight:600;
    }
    div {
      display: inline-block;

    }
    img {
      margin-left: 24px;
      width: 36px;
      height: 36px;
      vertical-align:middle;
      transform-origin: 50% 50%;
      transform:rotate(360deg);
    }
  }
  .refresh-img-rotate{
    animation: img-Rotate 0.8s linear 1 forwards;
  }
  @keyframes img-Rotate {
    0%{
      transform-origin: 50% 50%;
      transform:rotate(0deg);
    }
    50%{
      transform-origin: 50% 50%;
      transform:rotate(180deg);
    }
    100%{
      transform-origin: 50% 50%;
      transform:rotate(360deg);
    }
  }
  .token-self {
    font-size:30px;
    color:rgba(134,144,208,1);
    padding:  0 0 0 52px;
  }

  .total-item {
    text-align: center;
    p {
      margin-bottom: 24px;
      font-size:24px;
      color:rgba(113,118,140,1);

    }
    i {
      font-style: normal;
      font-size:40px;
      font-weight:600;
      color:rgba(32,44,91,1);

    }
  }

  .token-self-status {
    display: flex;
    align-items: center;
    //margin: 0 24px;
    padding: 15px 4px 25px;
    .total-item {
      flex: 1;
    }

  }

  .t-split {
    width:1px;
    height:84px;
    background:rgba(244,244,244,1);
  }

  .queue{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:658px;
    margin:0 auto;
    height:96px;
    line-height:96px;
    font-size:30px;
    h4{
      font-size:26px;
      color:#202C5B;
      /*img{
        width:14px;
        height:24px;
        margin-left:16px;
      }*/
    }
    p{
      font-size:24px;
      color:#71768C;
      img{
        width:14px;
        height:24px;
        margin-left:8px;
      }
    }
  }

  .official-purchase{
    width:690px;
    margin:0 auto 30px;
    height:84px;
    line-height:84px;
    background:rgba(23,62,143,1);
    border-radius:10px;
    text-align:center;
    p{
      font-size:32px;
      color:rgba(255,255,255,1);
    }
  }
  .scroll-area{
    /*height:calc(100% - 594px);*/
    /*border:1px solid red;*/
    padding-top:30px;
    background:rgba(255,255,255,1);
    .not-official-purchase{
      width:690px;
      margin:0 auto 30px;
      height:84px;
      line-height:84px;
      background:rgba(23,62,143,1);
      border-radius:10px;
      text-align:center;
      p{
        font-size:32px;
        color:rgba(255,255,255,1);
      }
    }
    .third-party{
      /*padding-top:24px;*/
      margin:0 30px 24px;
      /*height:36px;
      line-height:36px;*/
      font-size:34px;
      color:#202C5B;
      span{
        display:inline-block;
        width:6px;
        height:36px;
        margin-right:15px;
        background:rgba(43,117,243,1);
      }
    }
  }
  .code-content{
    /*height:100%;*/
    /*height:calc(100% - 168px);*/
    .no-result-wrapper{
      position:relative;
      /*height:100%;*/
      height:500px;
      h2{
        /*padding:12px 0;*/
        position:absolute;
        width:250px;
        height:330px;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        text-align:center;
        color: #838899;
        font-size:26px;
        img{
          display:block;
          margin:0 auto 20px;
          width:250px;
          height:274px;
        }
      }
    }
    /*h2{
      padding:12px 0;
      text-align:center;
      color: #838899;
      font-size:28px;
    }*/
  }
  .scroll-list-wrap{
    height:100%;
    background:#fff;
  }
  .code-item{
    position:relative;
    width:690px;
    margin:1px auto 23px;
    padding: 12px 0 32px;
    /*padding: 32px 0 32px;*/
    box-shadow:0 0 6px 0 rgba(102,102,102,0.3);
    border-radius:14px;
    .sold-out{
      position:absolute;
      top:0;
      right:0;
      width:106px;
      height:90px;
    }
    .title{
      display:flex;
      margin-bottom:29px;
      justify-content:space-between;
      align-items:center;
      span{
        width:270px;
        padding:2px 21px 3px 13px;
        background:rgba(23,62,143,0.4);
        border-radius:0 14px 14px 0;
        font-size:24px;
        color:rgba(255,255,255,1);
      }
      i{
        flex:1;
        text-align:right;
        margin-right:29px;
        font-size:28px;
        color:#00A989;
        font-style:normal;
      }
      strong{
        display:inline-block;
        width:142px;
        padding:14px 0 13px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:10px 0 0 10px;
        font-size:26px;
        color:rgba(255,255,255,1);
        cursor:pointer;
      }
      .delete{
        background:rgba(156,172,208,1);
      }
    }
    .adjust-margin-bottom{
      margin-bottom:41px;
    }
    .detail{
      display:flex;
      /*margin-top:32px;*/
      justify-content:space-between;
      align-items:center;
      padding:0 32px 0 32px;
      >div{
        h3{
          margin-bottom:16px;
          font-size:24px;
          color:rgba(113,118,140,1);
        }
        p{
          font-size:26px;
          font-weight:600;
          color:rgba(32,44,91,1);
        }
        strong{
          display:inline-block;
          padding:14px 47px 13px 45px;
          background:rgba(23,62,143,1);
          border-radius:10px 0 0 10px;
          font-size:26px;
          color:rgba(255,255,255,1);
          cursor:pointer;
        }
      }
      >div:first-child{
        text-align:left;

        min-width:156px;
      }
      >div:nth-child(2){
        text-align:center;
      }
      >div:nth-child(3){
        text-align:center;
      }
      >div:nth-child(4){
        text-align:right;
        min-width:156px;
      }
    }
  }
  .adjust-opacity{
    background:rgba(255,255,255,0.5);
    .title{
      span{
        background:rgba(23,62,143,0.2);
        color:rgba(255,255,255,0.5);
      }
    }
    .detail{
      >div{
        h3{
          color:rgba(113,118,140,0.5);
        }
        p{
          color:rgba(32,44,91,0.5);
        }
        strong{
          background:rgba(23,62,143,0.5);
          color:rgba(255,255,255,0.5);
        }
      }
    }
  }

  .mask{
    position:fixed;
    z-index:9991;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.5);

    .general-height{
      /*height: 500px;*/
      height: 67.46vh;
      background:rgba(255,255,255,1);
    }
    .special-height{
      height: 63.46vh;
      background:rgba(255,255,255,1);
    }
    .title{
      position:relative;
      padding:29px 0 28px;
      font-size:34px;
      border-bottom:1px solid rgba(245,245,245,1);
      color:#202C5B;
      text-align:center;
      img{
        position:absolute;
        left:30px;
        top:27px;
        width:20px;
        height:34px;
      }
    }
    .number-group{
      position:absolute;
      z-index:9992;
      bottom:0;
      left:0;
      right:0;
      height:448px;
      >div:first-child{
        border-top:1px solid rgba(245,245,245,1);
      }
      .number-btn{
        display:flex;
        div{
          flex:1;
          height:111px;
          line-height:111px;
          font-size:50px;
          color:#333;
          text-align:center;
          border-bottom:1px solid rgba(245,245,245,1);
          border-right:1px solid rgba(245,245,245,1);
          -webkit-tap-highlight-color:rgba(0,0,0,0.15);
        }
        div:active{
          background:rgba(0,0,0,0.15);
        }
        div:last-child{
          border-right:none;
        }
        .no-num{
          background:#e3e7ee;
          img{
            width:44px;
            height:32px;
            display:block;
            margin:40px auto;
          }
        }
      }
    }
    .shopping-detail{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;

      .content{
        margin:40px 30px 0;
        h2{
          margin-bottom:36px;
          text-align:center;
          font-size:30px;
          color:#202C5B;
          font-weight:600;
          span{
            font-size:72px;
          }
        }
        p{
          display:flex;
          justify-content:space-between;
          font-size:28px;
          padding-bottom:29px;
          border-bottom:1px solid #ececec;
          span{
            color:#71768C;
            span{
              color:#EB3257;
            }
          }
          strong{
            color:#202C5B;
            span{
              color:#EB3257;
            }
          }
          input{
            width:250px;
            height:84px;
            text-indent:15px;
            background:rgba(248,248,248,1);
            border:1px solid rgba(23,62,143,1);
            border-radius:6px;
          }
        }
        p:last-child{
          margin-top:30px;
        }
        h4{
          line-height:1.45;
          font-size:28px;
          text-align:center;
          color:#71768C;
          span{
            color:#EB3257;
          }
        }
        .quene-notice{
          height:112px;
          padding: 42px 0 46px;
          margin-bottom:15px;
          border:1px solid rgba(192,199,212,1);
          border-radius:12px;
          text-align:center;
          h5{
            font-size:26px;
            color:#456BBA;
            span{
              color:#EB3257;
            }
          }
        }
        .adjust-padding{
          padding:18px 0 18px;
          h5{
            line-height:1.4;
          }
        }
      }
      .confirm-content{
        margin:32px 30px 0;
        h1{
          margin-bottom:27px;
          font-size:28px;
          color:#71768C;
          text-align:center;
          span{
            color:#EB3257;
          }
        }
        h3{
          margin-bottom:28px;
          font-size:28px;
          color:#202C5B;
          text-align:center;
        }
        .number{
          margin-top:30px;
        }
        .buy-back{
          margin-bottom:26px;
          align-items:center;
        }
      }
      .official-content{
        p{
          padding-bottom:40px;
          align-items:center;
          border-bottom:none;
        }
      }
      .result{
        /*margin-top:97px;*/
        margin-top:45px;
        text-align:center;
        img{
          width:80px;
          height:80px;
          margin-bottom:41px;
        }
        h3{
          margin-bottom:60px;
          font-size:28px;
          color:#202C5B;
        }
        p{
          font-size:28px;
          color:#71768C;
        }
      }
      .pay-btn{
        position:absolute;
        bottom:30px;
        height:84px;
        line-height:84px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:8px;
        color:#fff;
        width:calc(100% - 60px);
        margin:0 30px;
        font-size:34px;
      }
    }
    .pay-password{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .password-wrapper{
        display:flex;
        margin:43px 30px 0;
        height:88px;
        line-height:88px;
        border:1px solid rgba(209,209,209,1);
        border-radius:10px;
        span{
          flex:1;
          text-align:center;
          border-right:1px solid rgba(209,209,209,1);
          strong{
            display:block;
            width:20px;
            height:20px;
            border-radius:50%;
            background:#333;
            margin:34px auto;
          }
        }
        span:last-child{
          border-right:none;
        }
      }
      .forget-password{
        color:#1253FC;
        width:25%;
        padding:12px 0;
        margin:12px auto 0;
        text-align:center;
        font-size:28px;
      }
      .pay-loading{
        position:absolute;
        z-index:9993;
        bottom:0;
        left:0;
        right:0;
        height:calc(100% - 70px);
        background:#fff;
        .paying{
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%, -50%);
          text-align:center;
          font-size:30px;
          color:#4B74E8;
          img{
            display:block;
            width:40px;
            height:40px;
            margin:0 auto 15px;
          }
        }
      }

    }
    .id-check{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .check-title{
        position:relative;
        img{
          position:absolute;
          left:30px;
          top:29px;
          width:34px;
          height:34px;
        }
      }
      .check-content{
        margin-top:32px;
        padding:0 30px;
        p{
          text-align:center;
          color:#202C5B;
          font-size:26px;
          line-height:1.5;
        }
        .sms-input{
          height:84px;
          line-height:84px;
          margin-top:28px;
          input{
            display:inline-block;
            height:84px;
            line-height:84px;
            width:59.9999%;
            text-indent:22px;
            font-size:30px;
            border-radius:10px 0 0 10px;
            border:1px solid rgba(227,227,227,1);
            border-right:none;
            box-shadow:0 0 0 rgba(0,0,0,0);
            -webkit-appearance:none;
            outline:none;
            background:#F6F7F8;
          }
          span{
            display:inline-block;
            width:39.9999%;
            height:84px;
            line-height:84px;
            border-radius:0 10px 10px 0;
            vertical-align:top;
            background:#D1D1D1;
            color:#fff;
            font-size:30px;
            text-align:center;
            /*border:1px solid rgba(227,227,227,1);
            border-left:none;*/
          }
        }
        .finish-btn{
          height:84px;
          line-height:84px;
          margin-top:32px;
          text-align:center;
          color:#fff;
          font-size:34px;
          border-radius:8px;
          background:rgba(23,62,143,0.5);
        }
        .success{
          background:rgba(23,62,143,1);
        }
      }
    }
    .adjust-bottom{
      bottom:-15px!important;
    }
  }

  .active-ct {
    .upgrade-member {

      margin: 0 auto 35px;
      width: 634px;
      /*height: 481px;*/
      /*height: 380px;*/
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      background:#fff;
      border-radius:14px;
      h2{
        margin:92px auto 36px;
        font-size:32px;
        text-align:center;
        color:#202C5B;
      }

      h3{
        margin:0 auto 80px;
        text-align:center;
        font-size:30px;
        line-height:1.5;
        color:#202C5B;
      }
      h4{
        font-size:13px;
        text-align:center;
      }
      .submit-btn{
        height:108px;
        line-height:108px;
        width:100%;
        font-size:0;
        margin:15px auto 0;
        border-top:1px solid #D0D4E4;
        text-align:center;
        span{
          display:inline-block;
          width:49.99999%;
          border-radius:5px;
          font-size:30px;
          color:#1253FC;
        }
        span:last-child{
          color:#1253FC;
          border-left:1px solid #D0D4E4;
          /*margin-right:10px;*/
        }
      }
    }
  }


  .backtop {

    position: fixed;
    right: 10px;
    bottom: 120px;
    z-index: 500;
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 46px;
      height: 46px;
      display: block;
    }
  }

  .fixed-position{
    position:fixed;
  }
  .static-position{
    position:absolute;
  }

  .fade-enter-active, .fade-leave-active{
    /*opacity:1;
    background: rgba(7, 17, 27, 0.8);*/
    transition: all 0.5s;
    transform:translate(0, 0);
  }
  .fade-enter, .fade-leave-active{
    /*opacity:0;
    background:rgba(7, 17, 27, 0);*/
    transform: translate(0, 100%);
  }
  input::-webkit-input-placeholder{
    color: #B7C3D1;
    font-size:26px;
  }
</style>
<style>
  .cube-toast-tip{
    /*max-width:13em;*/
    font-size:28px;
    max-width:15.5em;
    max-height:6em;
    line-height:40px;
  }
  .cube-toast.cube-popup {
    z-index: 10000!important;
  }
</style>











